import React from 'react'
import ReactDOM from 'react-dom'

/* 
  注意：

    React 事件处理程序中的 this 默认为： undefined
    而，我们在使用 事件处理程序 的时候，希望 事件处理程序 中的 this 是：当前组件的实例
    因此，我们需要解决 事件处理程序 中 this 指向的问题。
*/
class Counter extends React.Component {
  state = {
    count: 1,
    a: 'aa'
  }
  handleClick () {
    console.log("+1 执行了", this)
    this.setState({
      count: this.state.count + 1
    })
  }
  render () {
    return (
      < div >
        {/*    <p>{this.state}</p>
        <button onClick={
          this.setState({
            count: this.state + 1,
          })
        }>+1</button> */}


        <h1> 计数器：{this.state.count} - {this.state.a}</h1 >
        <button onClick={() => { this.handleClick }}>+1</button>
      </div >
    )
  }
}
ReactDOM.render(<Counter></Counter>, document.querySelector('#root'))